<template>
  <div id="app">
    <router-view
      :current-view="currentView">
    </router-view>
  </div>
</template>

<script>
  export default {
    name: 'app',
    props: [ 'currentView' ],
    data: function () {
      return {
        matchId: '',
        currentWalletAddress: '',
        isNotifierShown: false
      }
    },
    mounted () {
      console.log('app mounted')

      // setInterval(, 10000)
      setTimeout(() => {
        this.start()
      }, 20000)
    },
    methods: {
      start () {
        // 查询用户信息
        this.$root.callMatch({
          params: null,
          methodName: API.GET_ACCOUNTS,
          methodType: 'GET',
          success: (data) => {
            this.currentWalletAddress = data

            console.log('app addressed')

            this.$nextTick(function () {
              setInterval(this.timer, 12000)
            })
          },
          failure: null
        })
      },
      showMatchNotify () {
        this.isNotifierShown = true

        this.$notify({
          title: 'Notice',
          message: 'U got a challenger!',
          duration: 0,
          type: 'warning',
          onClick: () => {
            console.log('notify clicked')

            // this.isNotifierShown
            this.$notify.close()

            this.$router.push({
              path: '/match',
              query: {
                id: this.matchId,
                isChallenger: 0
              }
            })
          }
        })
      },
      timer () {
        if (this.isNotifierShown) {
          return
        }

        this.$root.callMatch({
          isProtected: true,
          methodName: API.CONCERNED_CHALLENGES,
          methodType: 'GET',
          success: data => {
            var filterredData = data.filter(_ => parseInt(_) !== 0)
            console.log('filterredData = ' + filterredData)

            var length = filterredData.length
            if (length > 0) {
              this.getMatchDetail(parseInt(filterredData[length - 1]))
            }
          },
          failure: null
        })
      },
      getMatchDetail (matchIdInt) {
        this.$root.callMatch({
          isProtected: false,
          params: matchIdInt,
          methodName: API.GET_MATCH_DETAIL,
          methodType: 'GET',
          success: data => {
            // console.log('GET_MATCH_DETAIL = ' + JSON.stringify(data))

            // address from, address to, int token_from, int token_to, int 赌注, int 阶段, int 比赛id
            // this.matchDetail = {
            //   from: data[0], // 如果是我 则 我挑战别人
            //   to: data[1], // 如果是我，则 别人挑战我
            //   tokenFrom: data[2],
            //   token_to: data[3],
            //   wager: data[4],
            //   status: data[5],
            //   id: data[6]
            // }
            console.log('status = ' + data[5] + ', data[1] = ' + data[1] + ', current = ' + this.currentWalletAddress)

            if (parseInt(data[5]) === 1 && data[1] === this.currentWalletAddress) {
              console.log('app vue notify')

              // this.isMatchWaitingToAccept = true
              // this.$notify({
              //   title: '提示',
              //   message: '这是一条不会自动关闭的消息',
              //   duration: 0
              // })

              if (!this.isNotifierShown) {
                this.matchId = data[6]

                this.showMatchNotify()
              }
            }
          },
          failure: null
        })
      }
    }
  }

  import { API } from '../util/constants'
</script>

<style>
  html {
    background: #eef0ef;
  }

  body {
    margin: 0;
    width: 100%;
  }

  * {
    box-sizing: border-box;
  }

  textarea {
    resize: none;
  }

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    width: 100%;
    /*max-width: 960px;*/
    min-width: 1020px;
    margin: auto;
  }
</style>
